<template>
  <el-container
    v-if="this.$route.meta.hiddenSiderbar !== false"
    style="height: aoto"
  >
    <el-header
      v-if="!(path === '/login')"
      style="
        height: 38px;
        background: #f9f9f9;
        color: #333333;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10;
        font-size: 14px;
        line-height: 34px;
      "
    >
      <!-- border-bottom: 1px solid #b3c0d1; -->
      <heads></heads>
    </el-header>
    <el-container>
      <div
        style="
          padding-top: 40px;
          display: flex;
          justify-content: center;
          width: 100%;
        "
        class="aabody"
        v-if="!(path === '/login')"
      >
        <!-- <home></home> -->
        <router-view style="width: 100%; margin: auto"></router-view>
      </div>
      <el-main style="padding: 0px; overflow-y: auto; padding-top: 60px" v-else>
        <router-view style="width: 100%; margin: auto"></router-view>
      </el-main>
      <!-- <el-aside
        style="
          background-color: #2d3a64;
          margin: 0px;
          padding: 0px;
          border: none;
        "
        class="sidebar"
        width="210px"
        v-if="!(path === '/')"
      > -->
      <!-- <el-aside style="background-color: #2D3A64;margin: 0px;padding-top: 60px;border: none" class="sidebar"
				:width="isCollapse?'60px':'201px'" v-if="!(path === '/')">
				<div class="toggle-button" style="position: relative;height: 50px;">
					<div style="position: absolute;top: 0;right:0;width: 100%;height: 100%;
			display: flex;align-items: center;justify-content: flex-end;">
						<img v-if="isCollapse" @click="toggleCollapse" src="../src/assets/images/zhankai.png" alt=""
							style="width: 30px;height: 30px; display : block;">
						<img v-else @click="toggleCollapse" src="../src/assets/images/shousuo.png" alt=""
							style="width: 30px;height: 30px; display : block ;">
					</div>
				</div>
				<menuComponents :isCollapse="isCollapse"></menuComponents>

			</el-aside>
			<el-main style="padding: 0px;overflow-y: auto;padding-top: 60px;">
				<router-view style="width: 100%; margin: auto"></router-view>
			</el-main> -->
    </el-container>
  </el-container>
  <router-view style="width: 100%; margin: auto" v-else> </router-view>
</template>

<script>
import menuComponents from "./components/menuComponents";
import heads from "./components/heads";
import home from "./views/home";

export default {
  name: "app",
  data() {
    return {
      path: "",
      isCollapse: false,
    };
  },
  components: {
    menuComponents,
    heads,
    home,
  },
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
  },
  mounted() {
    this.path = this.$route.path;
  },
  watch: {
    $route(to, from) {
      //路由变化
      this.path = to.path;
    },
  },
  created() {
    // console.log(this.$route.meta.hiddenSiderbar);
  },
};
</script>
<style scoped lang="less">
@import "~@/assets/css/common.less";

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.15);
  transition: color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.nav-icon {
  width: 24px;
  height: 22px;
  margin-right: 10px;
  box-sizing: border-box;
}

.el-container {
  // background: @lowBg_color;
}

.sidebar {
  width: 150px;
  background: @menuBg_color;
  // border-right: 2px solid #f2f3f8;
  font-size: 22px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(99, 104, 115, 1);
  transition: width 0.5s ease;
  // height: calc(100vh - 50px);
  background-color: #2d3a64;

  .logo {
    margin: 0;
    font-size: 18px;
    height: 60px;
    text-align: center;
    border-bottom: 2px solid #f2f3f8;
    overflow: hidden;
    box-sizing: border-box;

    &-name {
      line-height: 60px;
      text-align: center;
    }
  }
}

.el-container {
  height: 100%;
}

.el-menu {
  border: none;
  background: transparent;
}

.el-header {
  background-color: #fff;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #f2f3f8;

  .icon {
    font-size: 25px;
  }

  justify-content: space-between;

  .userInfo {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #333;

    .el-image {
      margin-right: 10px;
    }

    span {
      font-weight: bold;
    }

    .page_title {
      font-size: 20px;
      font-weight: bold;
      color: black;
      height: 20px;
      border-left: 2px solid black;
      display: flex;
      align-items: center;
      margin-left: 15px;
      padding-left: 15px;
    }
  }

  .hover {
    height: 40px;
  }

  .hover:hover {
    border-bottom: 3px solid #ccc;
  }
}

/deep/.el-submenu__title {
  padding-left: 37px !important;
  padding-right: 37px !important;
  display: flex;
  align-items: center;

  i {
    right: 37px;
  }
}

/deep/.el-menu--inline {
  text-align: center !important;
  background: rgba(241, 248, 255, 1);
}

.infoDrawer {
  width: 100%;
  padding: 0 20px;
}

.infoDrawer .userInfo {
  display: flex;
  align-items: center;
  font-weight: bold;
}

.el-drawer.rtl {
  width: 20% !important;
}

.el-button--danger {
  background: #f56c6c;
}

.container_page {
  padding: 15px;
  box-sizing: border-box;
  overflow: auto;
  min-width: 1000px;
}

.container_page .container {
  background: white;
  padding: 15px;
  border-radius: 15px;
}

</style>


<!-- <style>
  body {
    margin: 0px;
    padding: 0px;
  }
</style> -->